<script setup lang="ts" name="App">

import { ref,reactive } from 'vue'

//定义数据
let name = ref('张三')
//定义的是响应式数据(基础类型   数字、boolean 字符串)  非基础类型  function  Object
let age = ref(19) ;// RefImpl

let myClass = reactive({name:'java1班' ,nums:32}) //Proxy





//定义方法
function agePlus(){
  console.log(age);   //RefImpl
  age.value++
  
}

function changeName(){
  // name.value =  name.value +" ~"
 
}

function changeClassName(){
  
  // console.log(
  //   '%c myClass: ',
  //   'background-color: #3756d4; padding: 4px 8px; border-radius: 2px; font-size: 14px; color: #fff; font-weight: 700;',
  //   myClass 
  // )
  myClass.name = "安卓 java1班"
}

function  changeClassNums(){
  
  console.log(
    '%c myClass: ',
    'background-color: #3756d4; padding: 4px 8px; border-radius: 2px; font-size: 14px; color: #fff; font-weight: 700;',
    myClass 
  )
  myClass.nums ++;
}



</script>

<template>

  <div> 姓名 :{{ name }}</div>

  <div> 年龄 :{{ age }}</div>
  <div> <button @click="agePlus">改变姓名</button></div>
  <div> <button @click="agePlus">改变年龄</button></div>


  <hr>

  <div>  
      班级名称:{{ myClass.name }}   人数 {{ myClass.nums }}

  </div>
  <div>
    <button @click="changeClassName">修改 班级名称</button>
    <button @click="changeClassNums">修改 班级的人数</button>
  </div>



</template>

<style scoped></style>
